<template>
	<view class="page-container">
		<scroll-view class="content-scroll" scroll-y>
			<!-- 审批内容 -->
			<view class="tab-panel">
				<view class="task-header">
					<text class="task-title">{{reportList.displayName }} </text>
					<view class="task-meta">
						<view class="meta-item">
							<text class="meta-label">{{phaseText[phase]}}时间：</text>
							<text class="meta-value">{{reportList.startTime}} - {{reportList.endTime}}</text>
						</view>

					</view>
					<view class="task-meta" v-if="phase == 1">
						<view class="meta-item">
							<text class="meta-label">优先级：</text>
							<text class="meta-value priority-high">{{priority[reportList.priority]}}</text>
						</view>
					</view>
				</view>

				<view class="task-content">
					<text class="section-title">{{phaseText[phase]}}内容</text>
					<text class="content-text">
						{{reportList.content}}
					</text>
				</view>

				<view class="task-content">
					<text class="section-title">{{phaseText[phase]}}目标</text>
					<text class="content-text">
						<template v-for="item in approvalList">
							<text>{{item.goalName}}</text>
						</template>
					</text>
				</view>
				<!-- 				<view class="task-content" v-else>
					<text class="section-title">任务目标</text>
					<text class="content-text">
						<template v-for="item in approvalList">
							<text>{{item.goalName}}</text>
						</template>
					</text>
				</view> -->

				<view class="task-content">
					<text class="section-title">{{phaseText[phase]}}说明</text>
					<text class="content-text">
						{{reportList.description}}
					</text>
				</view>

			</view>

		</scroll-view>

		<!-- 底部导航 -->
		<view class="">
			<u-tabbar @change="handlePage" :fixed="true" :placeholder="false" activeColor="#d81e06">

				<u-tabbar-item text="审批" icon="/static/homeNav/renwu/05.png"></u-tabbar-item>
				<u-tabbar-item text="汇报" icon="/static/homeNav/renwu/06.png"></u-tabbar-item>
			</u-tabbar>

		</view>

	</view>
</template>

<script>
	import {
		selectPhaseGoal
	} from '@/common/api/renwu.js'
	export default {
		data() {
			return {
				tabbarIndex: 0,
				currentTab: 0,
				approvalList: {}, //总任务目标
				reportList: {}, //总内容
				phaseList: {}, //阶段任务目标
				task_id: null, //任务id
				target: null,
				phaseGoalId: null, //阶段id
				priority: {
					1: '重要',
					2: '紧急',
					3: '一般'
				},
				phase: 0, //0 有阶段  1无阶段
				phaseText: {
					0: '阶段',
					1: '任务'
				}
			}
		},
		onLoad(options) {
			this.task_id = options.task_id
			if (options.target) this.target = options.target
			if (options.phaseGoalId) this.phaseGoalId = options.phaseGoalId
			if (options.phase) this.phase = options.phase
			this.getData()
		},
		methods: {
			getData() {
				try {
					let params = {
						id: this.task_id, //总任务
						target: this.target, // 总任务目标
						phaseGoalId: this.phaseGoalId //（ 阶段目标的id）

					}
					selectPhaseGoal(params).then(res => {
						console.log(res, '--任务详情')
						// this.approvalList = res.data['总任务目标'] ?? []; //总任务目标
						// this.reportList = res.data['总内容'] ?? {} //总内容
						// this.phaseList = res.data['阶段任务目标'] ?? [] //阶段任务目标

						if (this.phase == 0) { //阶段

							this.approvalList = res.data['阶段任务目标'] ?? []; //目标
							this.reportList = this.formatTaskData(res.data['阶段任务'] ?? {}) //内容
						} else if (this.phase == 1) { //无阶段
							this.approvalList = res.data['总任务目标'] ?? []; //目标
							this.reportList = this.formatTaskData(res.data['总内容'] ?? {}) //内容
						}

					})
				} catch (error) {
					//TODO handle the exception
				}
			},
			formatTaskData(item) {
				return {
					// 保留原数据的所有字段
					...item,
					// 核心：如果有 taskName 就用它，否则用 stageName（根据实际业务调整优先级）
					displayName: item.taskName || item.stageName
				};
			},
			switchTab(index) {
				this.currentTab = index;
			},
			handlePage(index) {
				if (index == 0) { //审批
					uni.navigateTo({
						url: `/homeNav/rwgl/approval/index?type=1&phase=${this.phase}&task_id=${this.reportList.id}`
					})
				} else if (index == 1) {
					let selectedDate = this.$formatTime(new Date(), 'YYYY-MM-DD')
					uni.navigateTo({
						url: `/homeNav/rwgl/yjhb/yjhb?type=1&reportingTime=${selectedDate}&phase=${this.phase}&title=${this.reportList.displayName}&task_id=${this.reportList.id}` // 1任务汇报  0业绩汇报
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #f5f7fa;
	}

	.content-scroll {
		flex: 1;
		overflow: hidden;
	}

	.task-header {
		background-color: #fff;
		padding: 24rpx;
		margin-bottom: 20rpx;
	}

	.task-title {
		font-size: 36rpx;
		font-weight: 600;
		margin-bottom: 24rpx;
		color: #303133;
		display: block;
	}

	.task-meta {}

	.meta-item {
		display: flex;
		// flex-direction: column;
		display: flex;
		flex-wrap: wrap;
		gap: 12rpx;
	}

	.meta-label {
		font-size: 28rpx;
		// color: #333;
		margin-bottom: 8rpx;
	}

	.meta-value {
		font-size: 28rpx;
		font-weight: 500;
	}

	.priority-high {
		color: #fa3534;
	}

	.task-content {
		background-color: #fff;
		padding: 24rpx;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 30rpx;
		font-weight: 600;
		// margin-bottom: 24rpx;
		color: #303133;
		padding-bottom: 16rpx;
		// border-bottom: 1rpx solid #f0f0f0;
		display: block;
	}

	.content-text {
		font-size: 28rpx;
		line-height: 1.8;
		color: #606266;
		display: block;
		white-space: pre-line;
		background-color: #f2f2f2;
		padding: 16rpx;
		box-sizing: border-box;
		border-radius: 8rpx;
	}

	.approval-item,
	.report-item {
		padding: 24rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.approval-item:last-child,
	.report-item:last-child {
		border-bottom: none;
	}

	.item-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 16rpx;
	}

	.item-title {
		font-weight: 500;
		font-size: 30rpx;
	}

	.item-date {
		color: #909399;
		font-size: 24rpx;
	}

	.item-content {
		color: #606266;
		font-size: 26rpx;
		line-height: 1.6;
		display: block;
	}

	/* 底部导航样式 */
	.bottom-tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		border-top: 1rpx solid #e4e7ed;
		z-index: 999;
	}

	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #909399;
		transition: all 0.3s;
	}

	.tab-item.active {
		color: #2979ff;
	}

	.tab-icon {
		font-size: 40rpx;
		margin-bottom: 8rpx;
		background-color: #dfc21c;
		padding: 8rpx;
		border-radius: 8rpx;
	}

	.tab-icon image {
		width: 32rpx;
		height: 32rpx;
	}

	.tab-text {
		font-size: 22rpx;
	}
</style>